<template >
<view class="container">
      <div v-if='nothing'  class="nothing">
            <img src="/static/images/loading.png" alt="">
            <p>暂无数据</p>
            
        </div>
       <div v-for='(val,index) in items' :key='index' class="top">
         <div style="height:80px;  position: relative;">
            <navigator  hover-class="none" :url="'/pages/merchants/merchants?storeId=' + val.storeId ">
            <div class="left">
                <img v-if="vtitle=='关注厂家'  " class="header" :src="val.storeAvatarUrl" alt="">
                <img v-if="vtitle=='每日好厂'||vtitle=='今日我大牌' ||vtitle=='童品汇' " class="header" :src="val.storeAvatar" alt="">
                <img v-if="vtitle=='精选品牌' " class="header" :src="val.brandLogo" alt="">
              
                <div style="margin-left:10px;width:50vw;float:left"> 
                  <p v-if="vtitle=='关注厂家'||vtitle=='每日好厂'||vtitle=='今日我大牌'||vtitle=='童品汇' " class="name">{{val.storeName}}</p>
                  <p v-if="vtitle=='精选品牌' "  class="name">{{val.storeName}}</p>
                  <img class="pname" :src="'/static/images/buyHome/'+val.storeLevel+'.png'" /> 
                </div>
              
            </div>
            </navigator>
            <div class="right">
                    
                    <div v-if="vtitle=='关注厂家' " @click='AddFollowStore' :style="{'float':'right', 'color':'#333333','border':'1px solid rgba(51,51,51,0.6)','width':'60px','line-height':'24px'}">
                      关注中   
                    </div>
            </div>
         </div>
            <scroll-view  scroll-x    class="list"  >
              
                  <div class="li" v-for='(list,listindex) in val.productList' :key='listindex'>
                     <navigator  hover-class="none"  :url="'/pages/goods/goods?productId=' + list.productId+'&img='+ list.productThumb">
                    <div>
                        <img  :src="list.productThumb" alt="">
                        <p>￥{{list.price}}</p>
                    </div>
                     </navigator>
                  </div>
              
            </scroll-view>
    </div>
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'

export default {
  data () {
    return {
      typeId: 0,
      collectList: [],
      items:[],
      page:1,
      loadingBt:false,
      nothing:false,
      vtitle:'',
      type:''
    }
  },
  onShow(){
   this.vtitle= this.$route.query.title 

        wx.setNavigationBarTitle({
              title:this.vtitle,
            }) 
             this.FollowStoreList()
  },
 
   onUnload:function(){
     this.items=[];
     this.vtitle='';
     this.type='';
     this.page=1;

   },
   onReachBottom(){
     console.log(this.loadingBt)
    if(this.loadingBt){
       this.FollowStoreList()
    }
  
  },
  methods: {
    // 获取我的收藏信息
  async  FollowStoreList(){
    this.type=this.$route.query.dp
    let data=JSON.stringify({ "pageIndex":this.page,"pageSize":"5",type:this.type})
    let res  
     
    let Newtitle=this.vtitle
    switch(Newtitle)
        {
        case '关注厂家':
          res = await api.FollowStoreList({"data":data});
          this.items = this.items.concat(res.data);
        break;
        case '精选品牌':
         res = await api.getFeaturedBrandMore({"data":data});
        this.items = this.items.concat(res.data.list);
        break;
           case '每日好厂':
            res = await api.getFeaturedStoreMore({"data":data});
          this.items = this.items.concat(res.data.list);
        break;
             case '今日我大牌':
          res = await api.BestTodayMore({"data":data});
          this.items = this.items.concat(res.data);
        break;
         case '童品汇':
          res = await api.TPStoreList({"data":data});
          this.items = this.items.concat(res.data);
        break;
        case '尾品汇':
          res = await api.WPStoreList({"data":data});
          this.items = this.items.concat(res.data);
        break;
        
        default:
        
        }




      
        
           
         
                   if (this.items.length/this.page == 5) {
                        this.page++;
                        this.loadingBt=true;
                    }else{
                        this.loadingBt=false;
                    }
                    if(this.items==0){
                        this.nothing=true ;
                    }else{
                        this.nothing=false ;
                    }

    },
    AddFollowStore(){},
 
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/ucenter/collect'
    }
  }
}
</script>

<style lang='scss' scoped>
page{
    background: #f4f4f4;
    min-height: 100%;
}
.container{
  background: #f7f7f7;
}
.nothing{
    p{
        font-size: 16px;
        text-align: center;
        line-height: 32px;
        margin-top: 35px;
    }
    img{
        display: block;
        height:142px;
        width: 142px;
        margin: 0 auto;
        margin-top: 80px;
    }
}
.list{
  
  display: flex;
  white-space: nowrap;
height: 150px;;
  padding-left: 15px;
  width: 360px;
  margin-top: 8px;
      .li{
        display: inline-block;
        background: #fff;
        margin-right: 13px;
        img{
          height: 100px;
          width:100px;;
        }
      }
      p{
        text-align: center;
        font-size: 14px;
        color: #333333;
      }
   
}

.collect-list{
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #f7f7f7;
 
  
}

  .top{
  height: 210px;
  margin-bottom: 15px;
  width: 100vw;
  background: #fff;
  .left{
    height:50px; 
    position: absolute;
    left: 15px;
    bottom:7px;
    z-index: 9;
     .header{
        width: 50px;;
        height: 50px;;
         float: left;
      }
    .name{
        font-size: 15px;
        color:#000;
        padding-bottom: 10px;  
        overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .pname{
        width: 66px;
        height: 20px;
        display: block
    }
  }
  .right{
      z-index: 9;
    position: absolute;
    right: 10px;
    bottom: 10px;;
    width: 25vw;;
    height: 30px;
    div:nth-child(1){
      float:left;
      font-size:14px;
      color:#fff;
      width: 33px;;
      text-align: center;
     
    }
    div:nth-child(2){
      width: 55px;
      height: 24px;;
      border-radius:2px;
      background: #fff;
      color: #FD6D1F;
      font-size: 14px;
      text-align: center;
      line-height: 24px;
      margin-top:7px; 
    }
  }
}
</style>
